/* Header, Map, and Footer Layout */
/* Header, Map, and Footer Layout */
#divHeader {
    height: 10vh;
    color: #1f1f1f;
    background-color: #d3d3d3;  /* Light-medium grey */
    border-bottom: 1px solid #bbb;
}
#divMap {
    height: 80vh;
    background-color: #e0e0e0; /* Very light grey background */
}

#divFooter {
    height: 10vh;
    color: #1f1f1f;
    background-color: #d3d3d3;  /* Same grey as header */
    border-top: 1px solid #bbb;
}
/* Body Background */
body {	 
    background-color: #f0f0f0;
    color: #1a1a1a;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Center Cross Marker */
#divCross {
    z-index: 2000;
    color: #e53935;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;
}

/* Button Styling */
.btn {
    margin-top: 2px;
    background-color: #3f51b5; /* Indigo Blue */
    color: #ffffff;
    border: none;
}

.btn:hover {
    background-color: #303f9f;
    color: #ffffff;
}

.btn-footer {
    margin-top: 20%;
}

.btn-no-top-margin {
    margin-top: 0;
}

/* Utility Classes */
.setting-label {
    margin-top: 12%;
    margin-bottom: 12%;
}

.div-no-padding {
    padding: 0;
}

/* Table Header Styling */
.table-header {
    background-color: #455a64; /* Blue grey */
    color: #ffffff;
    font-weight: bold;
}

/* Stream Controls */
.stream-controls {
    display: none;
    font-size: 28px;
    padding-left: 10px;
    padding-right: 10px;
    color: #3f51b5;
}

/* Average Display */
#divAverage {
    display: none;
    color: #e53935;
}

/* Mode Label */
#mode {
    margin-top: -2px;
}

/* Modal Styling */
.modal {
    z-index: 2001;
    height: 90%;
    width: 100%;
    display: none;
    overflow-y: auto;
    background-color: #fafafa;
    color: #1a1a1a;
}

/* Sub Header Block */
.sub-header {
    color: #ffffff;
    background-color: #3f51b5;
    padding: 3px;
}

/* Slider Styling */
input[type="range"] {
    -webkit-appearance: none;
    background-color: #90a4ae;
    height: 10px;
    border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: -1px;
    z-index: 1;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #cccccc 0%, #3f51b5 50%, #cccccc 100%);
    border: 1px solid #5c9ded;
}
/* Light grey themed navbar for JPS Services */
.custom-navbar {
    background-color: #d3d3d3; /* Light-medium grey */
    border-bottom: 2px solid #90a4ae; /* Soft blue-grey accent */
    color: #1f1f1f;
}

.custom-navbar .navbar-brand,
.custom-navbar .nav > li > a {
    color: #1f1f1f;
}

.custom-navbar .nav > li > a:hover,
.custom-navbar .nav > li > a:focus {
    color: #ffffff;
    background-color: #5c6f7a; /* Muted blue-grey for hover */
}

.custom-navbar .navbar-nav > .active > a,
.custom-navbar .navbar-nav > .active > a:hover {
    background-color: #607d8b; /* Active link color */
    color: #ffffff;
}

.custom-navbar .navbar-toggle .icon-bar {
    background-color: #1f1f1f;
}
